<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body>
		<div id="demo1">
			<span>{{msg}}</span>
			<p>
				<input type="checkbox" :checked="dis" v-model="dis" /> 显示
				<div v-if="dis">
					<input id="showText" v-model="msg" v-bind:title="msg" />

					<select v-model="depart">
						<option v-for="item of departs" :value="item.id">{{item.name}}</option>
					</select>

					<ul>
						<li v-for="(item,index) of departs">
							{{index + 1}} --- {{item.name}}
						</li>
					</ul><p>
					
					删除第<input type="number" v-model="inputAttr.arrIndex"/>个元素
					<input type="button" @click="deleteDeparts" value="确定" /><p>
					
					添加科室:<input v-model="departName"/>
					<input type="button" @click="addDeparts" value="确认"/>
					
					
					<li v-for="(key,value) in objectData">
						{{key}} : {{value}}
					</li>

				</div>

		</div>

		<div id="demo2" v-bind:style="div2Class">
			计算属性自动翻转：<span> {{reverseMessage}} </span><p>
			<input v-model="text" /> <input @click="resevr" type="button" value="点击翻转" />
			
			<button v-bind:disabled="isButtonDisabled">根据属性值禁用按钮</button>
			
			<p>
			输入连接:<input type="text" v-model="url"/>
			
			<a v-bind:href="url">点击跳转{{url}}</a><p>
			
			<template v-if="Math.random() > 0.5">
				随机值大于0.5
			</template>
			<template v-else>
				小于0.5
			</template>
			
		</div>
		
		
		<script>
			var demo1 = new Vue({
				el: "#demo1",
				data: {
					"msg": "hello vue!",
					"depart": "",
					dis: true,
					objectData:{
						"year":2013,
						"address":"beijing"
					},
					"inputAttr":{
						"arrIndex":"0",
						"departName":""
					},
					"departs": [{
						"id": "1",
						"name": "内科"
					}, {
						"id": "2",
						"name": "外科"
					}, {
						"id": "3",
						"name": "精神科"
					}, {
						"id": "4",
						"name": "儿科"
					}, {
						"id": "5",
						"name": "耳鼻喉科"
					}]
				},
				methods:{
					deleteDeparts:function(){
						this.departs.splice(this.arrIndex -1,1);
					},
					addDeparts:function(){
						var data = {
							"id":Math.random(),
							"name":this.departName
						}
						this.departs.push(data);
					}
				}
			});

			var demo2 = new Vue({
				el: "#demo2",
				data: {
					"text": "hello world！",
					"isButtonDisabled":true,
					"url":"",
					"div2Class":{
						"background-color":"gray",
						"width":"550px",
						"height":"300px"
					}
				},
				computed:{
					reverseMessage:function(){
						return this.text.split("").reverse().join("");
					}
				},
				methods: {
					resevr: function() {
						this.isButtonDisabled = this.isButtonDisabled ? false : true;
						this.text = this.text.split("").reverse().join("");
					}
				}
			});

			Vue.component('todo-item', {
				props: ["todo"],
				template: '<li>组件输出:{{todo.name}}</li>'
			});
		</script>
	</body>

</html>